<template>
<view >
		
	
	<view class="backtop_">
		  	<image src="/static/bankcard/1.png" mode=""></image>
			<text>银行卡保存后无法修改，请仔细核对您的银行卡信息</text>
	</view>
  <view class="address_">
	  
	  
	
    <view class="form_wrapper">
     <!-- <u-picker
        mode="region"
        v-model="pickerShow"
        @confirm="regionConfirm"
        :area-code="areaCode"
        :default-region="defaultRegion"
      ></u-picker> -->
	  
	  <u-picker mode="selector" 
	    v-model="pickerShow"  
	    :default-selector="[0]" 
	    :range="selecbacklistobj" 
		@confirm="(e)=>banknameConfirm(e,1)"
	     range-key="bankName"></u-picker>
	<u-picker mode="selector"
	  v-model="pickerShow1"  
	  :default-selector="[0]" 
	  :range="bankprovincelistobj" 
			@confirm="(e)=>banknameConfirm(e,2)"
	   range-key="province"></u-picker>
	<u-picker mode="selector"
	  v-model="pickerShow2"  
	  :default-selector="[0]" 
	  :range="bankcitylistobj" 
	  @confirm="(e)=>banknameConfirm(e,3)"
	   range-key="city"></u-picker>
	<u-picker mode="selector"
	  v-model="pickerShow3"  
	  :default-selector="[0]" 
	  :range="bankbranchlistobj" 
			@confirm="(e)=>banknameConfirm(e,4)"
	   range-key="bankBranchName"></u-picker>
	  
      <u-form :model="formData" ref="uForm" label-width="150">
        <u-form-item label="持卡人姓名" prop="cardUserName">
          <u-input v-model="formData.cardUserName" />
        </u-form-item>
       
	  
        <u-form-item
          label="银行卡开户行"
          prop="openingBank"
          class="positioning_wrapper"
		  label-width="200"
        >
		
		
          <view class="content_">
            <!--            <u-input v-model="formData.intro" @click.stop="show = true" disabled="true"/>-->
            <u-input
              type="select"
              :select-open="pickerShow"
              v-model="model.bankName"
              placeholder="请选择"
              @click="pickerShow = true"
            ></u-input>
          </view>
        </u-form-item>
		<u-form-item
		  v-if="model.bankName"
		  label="银行卡所在省"
		  prop="province"
		  class="positioning_wrapper"
		  label-width="200"
		>
		  <view class="content_">
		   
		    <u-input
		      type="select"
		      :select-open="pickerShow1"
		      v-model="model.province"
		      placeholder="请选择"
		      @click="getbankprovincelist"
		    ></u-input>
		  </view>
		</u-form-item>
		<u-form-item
		v-if="model.province"
		  label="银行卡所在市"
		  prop="city"
		  class="positioning_wrapper"
		  label-width="200"
		>
		  <view class="content_">
		   
		    <u-input
		      type="select"
		      :select-open="pickerShow2"
		      v-model="model.city"
		      placeholder="请选择"
		      @click="getbankcitylist"
		    ></u-input>
		  </view>
		</u-form-item>
		<u-form-item
		  v-if="model.city"
		  label="开户支行"
		  prop="bankBranchName"
		  class="positioning_wrapper"
		  label-width="200"
		>
		  <view class="content_">
		   
		    <u-input
		      type="select"
		      :select-open="pickerShow3"
		      v-model="model.bankBranchName"
		      placeholder="请选择"
		      @click="getbankbranchlist"
		    ></u-input>
		  </view>
		</u-form-item>
		
		
		<!-- <u-form-item label="开户支行" prop="bankBranch">
		  <u-input v-model="formData.bankBranch" :type="'text'" />
		</u-form-item> -->
		<u-form-item label="银行卡号" prop="cardNo">
		  <u-input v-model="formData.cardNo" :type="'number'" />
		</u-form-item>
      </u-form>
    </view>
    
    <view class="submit_wrapper">
      <view @click="submit">保存</view>
    </view>
	<view class="footsq_">
		 <u-checkbox-group>
		 	<u-checkbox 
			size=30
			 v-model="checkedsq" shape="circle"></u-checkbox>
		 </u-checkbox-group>
		 <view class="textsq_">请阅读完并勾选<text @tap="godetelexq(1)">《用户服务协议》</text>及<text @tap="godetelexq(2)">《隐私政策》</text>完成授权银行卡信息</view>
	</view>
  </view>
  </view>
</template>

<script>
	

import { 
	saveBank,
	userBank,
    banklist,
    bankprovincelist,
    bankcitylist,
    bankbranchlist,} from "@/api/bankcard";
import { mapGetters } from "vuex";

export default {
  computed: mapGetters(["userId"]),
  name: "index",
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
    this.defaultRegion = ["广东省", "广州市", "天河区"];
  },
  onShow() {
    // this.addressListFn();
	this.getbanklsit()
  },
  onLoad(options) {
    console.log(options,'options')
    if (options&&options.address) {
      const address = JSON.parse(decodeURIComponent(options.address));
      console.log(address,'解析后的')
      //修改导航标题
      uni.setNavigationBarTitle({
        title: address && address.id ? "修改地址" : "添加收货地址",
      });

      //识别地址地区
      this.model.region =
        address.province + "-" + address.city + "-" + address.area;
      this.checked = address.itemType === 0 ? true : false;
      //详情地址
      this.formData = {
		  ...this.formData,
		  // 银行卡用户名称
		cardUserName:"",
		// 银行开户行
		
		openingBank:"",
	    // 开户支行
		bankBranch:"",
		// 银行卡号
        cardNo:"",
		
		bankName: "",
		
		province:"",
		
		city:'',
		
		bankBranchName:'',
		bankId:'',
		
      };
	 
    }
  },
  watch: {
    checked(val) {
      console.log(val, "监听开关");
      // 等于false，意味着用户手动关闭了switch
      if (val == false) {
        if (this.addressList.length === 0) {
          // 重新打开switch，并让它处于加载中的状态
          this.checked = true;
          this.loading = true;
          this.formData.itemType = 0;
          this.getRestultFromServer();
        }
        if (this.controlStatus == true) {
          this.controlStatus = false;
          return;
        }
        // 重新打开switch，并让它处于加载中的状态
        // 模拟向后端发起请求
      }
    },
  },
  data() {
    return {
      addressList: {},
      userAddress: {
        isDefault: false,
      },
      //开关
      loading: false,
      checked: false,
      // 中间变量，避免在watch中多次回调，造成无限循环
      controlStatus: false,
      //智能识别地址
      addressForm: {},
      value: "",
      border: false,
      type: "textarea",
      height: 100,
      autoHeight: true,
      pickerShow: false,
	  pickerShow1:false,
	  pickerShow2:false,
	  pickerShow3:false,
	  
      model: {
        bankName: "",
		bankNo:'',
		province:"",
		provinceCode:"",
		cityCode:'',
		city:'',
		bankBranchName:''
      },
	  selecbacklistobj:[],
	  bankprovincelistobj:[],
	  bankcitylistobj:[],
	  bankbranchlistobj:[],
      rules: {
		  
		  // cardUserName:"",
		  // // 银行开户行
		  
		  // openingBank:"",
		  // // 开户支行
		  // bankBranch:"",
		  // // 银行卡号
		  // cardNo:"",
		  
		  // bankName: "",
		  
		  // province:"",
		  
		  // city:'',
		  
		  // bankBranchName:''
        cardUserName: [
          {
            required: true,
            message: "请输入持卡人姓名",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
        ],
        openingBank: [
          {
            required: true,
            message: "请选择开户行",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
        ],
        province: [
          {
            required: true,
            message: "请选择开户行所在省",
            // 可以单个或者同时写两个触发验证方式
            trigger: ["change", "blur"],
          },
         
        ],
        city: [
          {
            required: true,
            message: "请选择开户行所在市",
            trigger: ["change", "blur"],
          },
         
        ],
		bankBranchName: [
		  {
		    required: true,
		    message: "请选择开户支行",
		    trigger: ["change", "blur"],
		  },
		 
		],
		cardNo:[
		  {
		    required: true,
		    message: "输入银行卡号",
		    trigger: ["change", "blur"],
		  },
		],
      },
      formData: {
        //用户id
        memberId: uni.getStorageSync("userInfoServer")
          ? uni.getStorageSync("userInfoServer").userId
          : "",
      
      },
      //选择的地区 中午形式
      defaultRegion: [],
	   checkedsq:true,
      areaCode: [],
    };
  },
  methods: {
	  model: {
	    bankName: "",
	  		bankNo:'',
	  		province:"",
	  		provinceCode:"",
	  		cityCode:'',
	  		city:'',
	  		bankBranchName:''
	  },
	async getbanklsit(){
		
		
		const res = await banklist();
		this.selecbacklistobj=res.data
		console.log(res)
		console.log("selecbacklistobj",this.selecbacklistobj)
	},
	async getbankprovincelist(){
		
		const res = await bankprovincelist({bankNo:this.model.bankNo});
		this.bankprovincelistobj=res.data
		this.pickerShow1=true
		console.log(res)
	},
	async getbankcitylist(){
		
		const res = await bankcitylist({bankNo:this.model.bankNo,provinceCode:this.model.provinceCode});
		this.bankcitylistobj=res.data
		this.pickerShow2=true
		console.log(res)
		
	},
	async getbankbranchlist(){
		const res = await bankbranchlist({bankNo:this.model.bankNo,provinceCode:this.model.provinceCode,cityCode:this.model.cityCode});
		this.bankbranchlistobj=res.data.records
		this.pickerShow3=true
		console.log(res)
	},
	  
    // async addressListFn() {
    //   console.log(this.userId,'this.userId')
    //   const res = await selAddrApi(this.userId);
    //   console.log(res, "`地址管理");
    //   if (res.code === 0) {
    //     this.addressList = res.data;
    //     if (this.addressList.length === 0) {
    //       this.checked = true;
    //       this.formData.itemType = 0;
    //     }
    //   }
    // },


    //修改默认地址设置
    ChangeIsDefault: function (e) {
      this.$set(this.userAddress, "isDefault", !this.userAddress.isDefault);
    },
   

    // switch打开或者关闭时触发，值为true或者false
    change(status) {
      console.log(status, "开关");
      if (status) {
        //0 为默认地址
        this.formData.itemType = 0;
      } else {
        this.formData.itemType = 1;
      }
    },
    getRestultFromServer() {
      // 通过定时器模拟向后端请求
      setTimeout(() => {
        this.controlStatus = true;
        // 后端允许用户关闭switch，设置checked为false，结束loading状态
        this.loading = false;
        this.checked = true;
        uni.showToast({
          title: "不可修改!",
          icon: "error",
          duration: 2000,
        });
      }, 1500);
    },

    // 选择地区回调
    banknameConfirm(e,index) {
      console.log(e);
	  // bankprovincelistobj:[],
	  // bankcitylistobj:[],
	  // bankbranchlistobj:[],
	  if(index===1){
		  this.formData.province="",
		  this.formData.city="",
		  this.formData.bankBranchName=''
		  this.model.province="",
		  this.model.city="",
		  this.model.bankBranchName=''
		  this.model.bankName=this.selecbacklistobj[e[0]].bankName
		  this.model.bankNo=this.selecbacklistobj[e[0]].bankNo
		  this.formData.openingBank=this.model.bankName
	  }else if(index===2){
		  this.formData.city="",
		  this.formData.bankBranchName=''
		  this.model.city="",
		  this.model.bankBranchName=''
		  this.model.province=this.bankprovincelistobj[e[0]].province
		  this.model.provinceCode=this.bankprovincelistobj[e[0]].provinceCode
		  this.formData.province=this.model.province
		  
	  }else if(index===3){
		  this.formData.bankBranchName=''
		  this.model.bankBranchName=''
		  this.model.city=this.bankcitylistobj[e[0]].city
		  this.model.cityCode=this.bankcitylistobj[e[0]].cityCode
		  this.formData.city=this.model.city
		  
	  }else if(index===4){
		  this.model.bankBranchName=this.bankbranchlistobj[e[0]].bankBranchName
		  this.formData.bankId=this.bankbranchlistobj[e[0]].bankId
		   this.formData.bankBranchName=this.model.bankBranchName
		  
	  }
	  
    },
	godetelexq(index){
		if(index==1){
			uni.navigateTo({
			  url: `/pages/subpackage/strategy/userstrategy`,
			});
		}else if(index==2){
			uni.navigateTo({
			  url: `/pages/subpackage/strategy/privacystrategy`,
			});
		}
	},
    async submit() {
		
		
		// saveBank
      this.$refs.uForm.validate(async (valid) => {
        if (valid) {
			console.log(this.formData)
			if(this.checkedsq){
				const res = await userBank({payeeName:this.formData.cardUserName,
				bankCardNo:this.formData.cardNo,bankId:this.formData.bankId
				});
				if(res.code===0){
					uni.navigateBack({
					            //关闭当前页面，返回上一页面或多级页面。
					            delta:1
					});
					
				}
			}else{
				uni.showToast({
					title:"请阅读并勾选<用户服务协议>和<隐私政策>",
					icon:"none"
				})
				return
			}
			
			
			
			
          console.log("验证通过");

         
        } else {
          console.log("验证失败");
          return;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
	.backtop_{
		  width: rpx(375);
		  height: rpx(38);
		  background: #FFE9E9;
		  border-radius: 0px 0px 0px 0px;
		  opacity: 1;
		  font-size: rpx(12);
		  font-weight: 400;
		  color: #353535;
		  display: flex;
		  align-items: center;
		  
		  >image{
			  width: rpx(20);
			  height: rpx(20);
			  margin-left: rpx(12);
			  margin-right: rpx(4);
		  }
	}
.address_ {
  background-color: #f5f5f5;
  padding: rpx(12);

  .form_wrapper {
    background: #ffffff;
    border-radius: rpx(5);
    padding: rpx(0) rpx(12);
    .positioning_wrapper::v-deep {
      display: flex;
      .u-form-item {
        flex: 1;
      }
      .content_ {
        display: flex;
		text-align: right;
		justify-content: right;
		
		>.u-input__input{
			text-align: right;
		}
      }
    }
    .img_wrapper {
      display: flex;
      align-items: center;
      margin-left: auto;
      > image {
        width: rpx(12);
        height: rpx(12);
        vertical-align: middle;
        //margin-top: rpx(3);
        margin-right: rpx(2);
      }
      > text {
        font-size: rpx(12);
        font-weight: 400;
        color: #353535;
      }
    }
  }
  > .location_acquisition {
    padding: rpx(16) rpx(12);
    margin-top: rpx(8);
    background: #ffffff;
    border-radius: rpx(5);
    > .text_ {
      background: #fafafa;
      border-radius: rpx(5);
      padding: rpx(12);
      margin-top: rpx(8);
    }
    > .identify_ {
      display: flex;
      margin-top: rpx(8);
      view {
        //margin-left: auto;
        //background: #fa5151;
        //border-radius: rpx(12);
        //padding: rpx(3) rpx(15);
        //font-size: rpx(13);
        //font-weight: 400;
        ////color: #ffffff;
        //margin-top: rpx(8);
      }
    }
  }
  > .switch_wrapper {
    display: flex;
    //width: rpx(351);
    //height: rpx(50);
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    margin-top: rpx(8);
    border-radius: rpx(5);
    padding: rpx(12) rpx(14) rpx(12) rpx(12);
    margin-bottom: rpx(180);
  }
  > .submit_wrapper {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    padding: rpx(8) rpx(12) rpx(8);
    z-index: 99;
    > view {
      background: #fa5151;
      border-radius: rpx(22);
      width: rpx(351);
      height: rpx(44);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: rpx(17);
      font-weight: 400;
      color: #ffffff;
    }
  }
}
.footsq_{
	display: flex;
	justify-content: center;
	font-size: rpx(10);
	 position: fixed;
	bottom: rpx(70);
	text-align: center;
	align-items: center;
	.textsq_{
		font-size: rpx(10);
		margin-left: rpx(-15);
		>text{
		  color: blue;	
		}
	}
}
.textsq_{
	font-size: rpx(10);
}
</style>
